<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>Vue 初始化学习</h2>
        <h2 v-on:click="countAdd"> count=={{count}}</h2>
        <h2>word ={{word}}</h2>
        <h2>text ={{text}}</h2>
        <button @click="changeText"> changeText</button>
        <div v-if="flag">
            <img :title="title" @click="changeSrc" v-bind:src="link" style="width: 200px;height: 200px;" class="img"
                alt="">
        </div>
        <div v-else>
            <img style="width: 200;height: 200px;" src="../img/F71127E60F7A68AC6C9CE0C4EFD3A036.jpg" alt="">
        </div>
        <button @click="flag=!flag">点击切换</button>
        <div>
            <p>msg == {{msg}} </p>
            <p>
                <input type="text" :value="msg" @input="changeMsg">
            </p>
            <p>
                <input type="text" v-model="msg">
            </p>
        </div>
        <ul>
            <li v-for="(item,index) in list" :key="index">
                <h2>{{item}}-{{index+1}}</h2>
            </li>
        </ul>
    </div>
</body>

<!-- 
        // vm  实例化 Vue 得到的对象 
        // vm  遍历  #App 下面的 DOM  和 data 结合在一起 
        // el  指定vue 作用的范围   document.querySelector(el)
        // data 需要绑定的数据  MVC - MVVM  - MVP   Model 数据层 
        // {{  }} 双大括号语法 插值表达式  绑定数据 
        //  v-bind 绑定属性  attribute 
        //  v-on 绑定事件 

        v-model 用于 input 数据的双向绑定  
        v-bind 绑定属性   : 缩写  attribute 
        v-on 绑定事件   @ 缩写  addEventListener 
        v-if     if 隐藏  渲染和不渲染的区别    removeChild appendChild 
        v-show  显示和隐藏    display:none 样式切换  display:none/block 

        methods 指当前 app 下绑定的方法 
        v-for 遍历数据   forEach  

        v-model  表单输入和应用状态之间的双向绑定  
        v-model 只能用于 input 或者 textarea
        v-model 封装语法糖   事件监听  数据绑定  
        v-model 实现数据双向绑定  
        1. 修改 数据 model  更新 view DOM
        2. 修改 view DOM  更新数据 

        v-model 指令把 DOM(视图) 和 数据（model）绑定在一起 
        当你修改 view 触发DOM Listeners 就马上去 修改对应的model 的值
        当你修改 model(data) 中的值 马上去执行 data-bindings 去 修改对应 DOM 

     -->

<script>
    console.log(Vue);
    // 实例化Vue对象  this = vm 
    const vm = new Vue({
        el: '#app',
        data: {
            count: 2000,
            word: 'Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：',
            text: 'hello world',
            link: '../img/FB13C9C162D8D2723AC38C855BE31B4C.jpg',
            title: '123456',
            msg: '123123',
            flag: !!0,
            list: ['111', '222', '333', '444']
        },
        methods: { // 事件和方法 
            countAdd() {
                this.count++;
            },
            changeText() {
                this.text = 'are you ok?'
            },
            changeSrc() {
                this.link = '../img/020AFBD2AF2816CBC6B217184D565317.jpg'
            },
            changeMsg(e) {
                this.msg = e.target.value;
            }
        }
    })
</script>

</html>